---
title: VisibleButton
description: A toggle button that switches between visible and hidden states, commonly used for showing/hiding sensitive information like passwords or API keys.
---
import { VisibleButtonDemo } from "./visual-button.examples"

## Overview

The VisibleButton component provides a toggle button that switches between visible and hidden states. It's designed to be commonly used for showing/hiding sensitive information like passwords, API keys, or other confidential data with proper accessibility support.

## Usage

```tsx
import { useState } from 'react';
import { VisibleButton } from '@unkey/ui';

function Example() {
  const [isVisible, setIsVisible] = useState(false);
  
  return (
    <div>
      <VisibleButton 
        isVisible={isVisible} 
        setIsVisible={setIsVisible}
        title="password" // Used for accessibility labels
        variant="outline" // Optional: defaults to "outline"
      />
      {isVisible ? "Sensitive content" : "•••••••"}
    </div>
  );
}
```

## Examples

### Basic Usage
Examples showing different variants and use cases for the VisibleButton component.

<VisibleButtonDemo />

## Features

- **Toggle Functionality**: Switches between visible/hidden states with icon changes
- **Accessibility**: Built-in accessibility with screen reader support
- **Dark Mode Support**: Consistent appearance in light and dark themes
- **Customizable Styling**: Extensive styling options through className prop
- **Configurable Variants**: Supports different button variants
- **State Management**: Integrates with React state for controlled behavior

## Props

| Prop | Type | Description |
|------|------|-------------|
| `isVisible` | `boolean` | Current visibility state |
| `setIsVisible` | `(visible: boolean) => void` | Function to update visibility state |
| `className` | `string` | Optional CSS classes to apply to the button |
| `title` | `string` | Text used for accessibility labels and tooltip |
| `variant` | `ButtonProps["variant"]` | Optional button variant (defaults to "outline") |

Additional props are forwarded to the underlying `Button` component. See [Button component](/design/components/buttons/button) for more details.

## Variants

The component accepts all standard Button props.

## Structure

The VisibleButton component is a specialized button that:

1. **Renders as Button**: Uses the base Button component for styling and behavior
2. **Icon Management**: Switches between Eye and EyeSlash icons based on state
3. **State Integration**: Integrates with external state management
4. **Accessibility**: Provides proper ARIA labels and descriptions

## Styling

The button features:

- A minimal, circular design for subtle appearance
- Icon-based state indication (Eye/EyeSlash)
- Hover and focus states for better interaction
- Dark mode support with appropriate color schemes
- Responsive sizing (inherits from Button component)
- Customizable through className prop

### Custom Styling

You can customize the appearance using the className prop:

```tsx
<VisibleButton
  isVisible={isVisible}
  setIsVisible={setIsVisible}
  title="API Key"
  variant="ghost"
  className="custom-visible-button"
/>
```

## Accessibility

The component includes comprehensive accessibility features:

- **Dynamic ARIA Labels**: aria-labels based on the title prop and current state
- **Semantic Button**: Uses semantic button element with proper ARIA attributes
- **Focus Management**: Maintains focus states for keyboard navigation
- **Tooltip Support**: Shows tooltip on hover with current action
- **Screen Reader Support**: Announces state changes appropriately